// 大屏性能优化工单
import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const LeftTop: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "上海",
            "天津",
            "重庆",
            "广东",
            "广西",
            "浙江",
            "江苏",
            "湖北",
          ],
        },
        series: [
          {
            name: "2011",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230, 131744, 630230],
          },
          {
            name: "2012",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807, 131744, 630230],
          },
          {
            name: "2013",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230, 131744, 630230],
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ width: "100%", height: "100%" }}></div>;
};
export default LeftTop;
